<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>7.27练习VUE</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<style type="text/css">
		#vue_app_one {
			width: 300px;
			height: 100px;
			border: 1px solid #444;
			margin: 20px;
			font-size: 20px;
			font-weight: 700;
			padding: 30px;
		}

		#vue_app_two {
			width: 300px;
			height: 100px;
			border: 1px solid #444;
			margin: 20px;
			font-size: 20px;
			font-weight: 700;
			padding: 30px;
		}
	</style>
	<body>
		<h1>实例化多个VUE对象</h1>
		<div id="vue_app_one">
			<p>{{one_msg}}</p>
			<button type="button" @click="change_two">通过实例1改变实例2</button>
		</div>
		<div id="vue_app_two">
			<p>{{two_msg}}</p>
			<button type="button" @click="change_one">通过实例2改变实例1</button>
		</div>
		<div id="msg">
			<msgcomp></msgcomp>

		</div>
	</body>
	<script type="text/javascript" src="app.js">

	</script>
</html>
